<style lang="less">
.search {
  width: 100%;

  .search-top {
    display: flex;
    justify-content: center;
    margin-top: 15px;

    .back{
      padding:10px 5px;
      height:100%;
    }

    input {
      width:66%;
      height: 100%;
      border:1px solid pink;
      // padding:10px;
      padding: 10px 0 10px 10px;

    }
    button {
      display: inline-block;
      // background-color: orange;
      background-color:pink;
    }
  }

  .list {
    ul {
      flex-wrap: wrap;
      padding: 0 20px;

      li {
        margin-top: 20px;

        a {
          box-sizing: border-box;
          display: flex;

          img {
            display: inline-block;
            width: 100px;
            height: 140px;
          }
        }

        .intro {
          margin-left: 10px;

          P {
            width: 100px;
            margin-top: 5px;
          }

          .title {
            width: 100%;
            font-size: 18px;
            font-weight: bold;
          }

          .author {
            width: 100%;
            margin-top: 5px;
            font-size: 15px;
            color: gray;
          }

          .reads {
            width: 100%;
            margin-top: 5px;
            font-size: 15px;
            color: gray;
          }

          .content {
            margin-top: 10px;
            font-size: 18px;
            width: 100%;
            height: 56px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
          }

          span {
            margin-left: 10px;
          }

          .extra {
            display: inline-block;
            margin-top: 9px;
            font-size: 18px;
            color: pink;

          }
        }
      }
    }
  }

}
</style>

<template>
  <div class="search">
    <!-- <h3>搜索</h3> -->
  
    <router-view></router-view>
  
    <div class="search-top">
      <div class="back">
        <router-link to="/index">
          返回
        </router-link></div>
      <!-- <i class="back"> 返回</i> -->
      <input @keydown.enter="getInputValue" v-model="text" type="text" placeholder="输入关键字">
      <button @click="getInputValue">搜索</button>
    </div>
    
    <div>
  
      <div class="list">
        <van-empty v-if="arr.length == 0" image="search" description="暂无搜索信息" />
        <ul v-else>
          <li v-for="(item) in arr"  :key="item.id">
            <router-link :to="{path: '/detail', query:{id: item.id}}">
              <div>
                <img :src="item.coverImage" :alt="item.coverImage">
              </div>
              <div class="intro">
                <p class="title">{{ item.title }}</p>
                <p class="author">{{item.author}} | {{ item.category }}</p>
                <p class="reads">{{ item.showReadCount }}人在读</p>
                <div class="content">{{ item.description }}</div>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  
  </div>
</template>

<script>
import {  Toast } from 'vant'

import { Search } from '../api/index'

export default {

  data() {
    return {
      arr: [],
      text: "", 
    }
  },

  methods: {

    async searchBook(value) {
      
      await Search({ key: value })
        .then(
          content => {
            console.log("请求成功:", content)
            // 解构赋值
            let { code, data } = content;
   
            if (code === 0) {
 
              let newArr = data?.books.map(item => {
                let obj = {};
                obj.coverImage = item.coverImage;
                obj.title = item.title;
                obj.author = item.author;
                obj.category = item.category;
                obj.showReadCount = item.showReadCount;
                obj.description = item.description;

                return obj;
              })

              this.arr = newArr;

            }

          }
        )
        .catch(
          err => {
            console.log("请求失败:", err)
          }
        )
      setTimeout(() => {

        this.isLoading = false;
      }, 500);
    },

    getInputValue() {
      let text = this.text;
      if (text == "" || text.length == 0) {
        Toast("输入以进行搜索");
        return false;
      }

      this.searchBook(text);
    }
  },
}
</script>

